<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录 - Online Judge</title>
    <link rel="stylesheet" href="/css/login.css">
</head>

<body>
    <div class="form-container">
        <h2>用户登录</h2>
        
        <div id="message" class="message"></div>
        
        <form id="loginForm">
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" name="username" 
                       placeholder="请输入用户名" required autofocus>
            </div>
            
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" 
                       placeholder="请输入密码" required>
            </div>
            
            <button type="submit" class="btn" id="submitBtn">登录</button>
        </form>
        
        <div class="form-footer">
            还没有账号？<a href="/register.html">立即注册</a> | 
            <a href="/index.html">游客访问</a>
        </div>
    </div>

    <script src="/js/auth.js"></script>
    <script>
        // 如果已登录，直接跳转到首页
        if (isLoggedIn()) {
            window.location.href = '/index.html';
        }
        
        // 登录表单提交处理
        document.getElementById('loginForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const username = document.getElementById('username').value.trim();
            const password = document.getElementById('password').value;
            const submitBtn = document.getElementById('submitBtn');
            
            // 基本验证
            if (!username || !password) {
                showMessage('message', '请输入用户名和密码', 'error');
                return;
            }
            
            submitBtn.disabled = true;
            submitBtn.textContent = '登录中...';
            
            try {
                // 调用登录API
                const response = await fetch(`${API_BASE}/login`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        username: username,
                        password: password
                    })
                });
                
                const result = await response.json();
                
                if (result.status === 0) {
                    // 登录成功，保存token和用户信息
                    saveAuth(result.token, result.user);
                    showMessage('message', '登录成功！即将跳转...', 'success');
                    
                    // 跳转到首页
                    setTimeout(() => {
                        window.location.href = '/index.html';
                    }, 1000);
                } else {
                    // 登录失败
                    showMessage('message', result.msg || '用户名或密码错误', 'error');
                    submitBtn.disabled = false;
                    submitBtn.textContent = '登录';
                }
            } catch (error) {
                console.error('Login error:', error);
                showMessage('message', '网络错误，请稍后重试', 'error');
                submitBtn.disabled = false;
                submitBtn.textContent = '登录';
            }
        });
    </script>
</body>
</html>